<!--本页面由uniapp切片工具生成，uni-app切片-可视化设计工具(一套代码编译到7个平台iOS、Android、H5、小程序)，软件下载地址：http://www.ymznkf.com/new_view_669.htm -->
<template>
  <view class="content">
    <mvBar :mysNavConfig="mysNavConfig"></mvBar>
    <view class="bg-img"><image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/personal-bg.png"></image></view>
    <view class="guid">
      <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/card-guid.png"></image>
    </view>
    <view class="bindWx_1">
      <view class="title">卡密绑定</view>
      <view class="bindWx_8">
        <image :src="iscard?'http://wx.xiongmaovip.com/miniapp/static/personal-center/card.png':'http://wx.xiongmaovip.com/miniapp/static/personal-center/key.png'"
               mode="scaleToFill"
               border="0"
               class="bindWx_31">
        </image>
        <input :placeholder="iscard?'卡号':'密钥'"
               v-model="memberCard"
               class="Mobile" />
      </view>
      <view class="bindWx_9">
        <image src="http://wx.xiongmaovip.com/miniapp/static/personal-center/pwd.png"
               mode="scaleToFill"
               border="0"
               class="bindWx_34">
        </image>
        <input placeholder="密码"
               password
               v-model="pwd"
               type="safe-password"
               class="CheckCode" />
      </view>
      <text decode="true"
            class="bindWx_10">绑定成功后,跳转到卡包列表</text>
      <button v-on:click="BtSubmit_30_click()"
              class="BtSubmit">绑定
      </button>
    </view>
  </view>
</template>

<script>
import {
  bindCompanyCard,
  bindPowerCard
} from '@/api/index.js'
import mvBar from "@/components/mysNavBar.vue";
export default {
  components: {mvBar},
  data() {
    return {
      mysNavConfig: {
        navPadding: true,
        isHome: false,
        navFixed: true,
        navTitle: {
          text: "绑定卡片",
          color: "#FFFFFF",
          fontSize: "34upx", // px upx rpx
          fontWeight: "500", // blod
        },
        leftIconPath: 'http://wx.xiongmaovip.com/miniapp/static/header/back.png',
        // rightIconPath: '/static/header/back-b.png',
      },
      memberCard: '',
      pwd: '',
      iscard: null,
    };
  },
  onLoad (option) {
    console.log(option);
    option.bindCar === 2 ? this.iscard = true : this.iscard = false
  },
  methods: {
    BtSubmit_30_click () {
      uni.showLoading({
        title: '绑定中...'
      })
      if (this.iscard) {
        bindCompanyCard({
          memberCard: this.memberCard,
          pwd: this.pwd,
          openid: uni.getStorageSync('userOpenId'),
        }).then(res => {
          uni.hideLoading()
          console.log('绑定企业卡', res);
          if (res.code == 200) {
            uni.navigateBack()
          }
        }).catch(err => {
          console.log(err);
        })
      } else {
        bindPowerCard({
          memberCard: this.memberCard,
          pwd: this.pwd,
          openid: uni.getStorageSync('userOpenId'),
        }).then(res => {
          uni.hideLoading()
          console.log('绑定能量卡', res);
          if (res.code == 200) {
            uni.navigateBack()
          }
        }).catch(err => {
          console.log(err);
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.bg-img{
  width: 100%;
  height: 560upx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  image{
    width: 100%;
    height: 100%;
  }
}
.guid{
  margin: auto;
  text-align: center;
  width: 620upx;
  height: 320upx;
  image{
    width: 100%;
    height: 100%;
  }
}
button::after {
  border: none;
  width: auto;
}

input {
  outline: none;
  border: none;
  list-style: none;
  width: auto;
}

// .list_item {
// 	float: left;
// }

// .ym_hide {
// 	display: none;
// }

// .ym_show {
// 	display: block;
// }

// .slide-image {
// 	width: 100%;
// 	height: 100%;
// }

// .list_horizontal {
// 	width: auto;
// 	display: inline-block;
// }

.bindWx_1 {
  box-sizing: border-box;
  white-space: normal;
  width: 700upx;
  margin: 30upx auto 0;
  //height: 100%;
  padding: 24upx 24upx 60upx;
  background: #FFFFFF;
  border-radius: 24upx;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .title{
    color: #1B1B1B;
    font-size: 36upx;
    font-weight: 500;
    margin-top: 12upx;
  }

  .bindWx_8 {
    white-space: normal;
    width: 660upx;
    height: 98upx;
    margin-top: 52upx;
    background-color: #ffffff;
    text-align: left;
    border-color: #006241;
    border-width: 1upx;
    border-style: solid;
    border-radius: 50upx;
    font-size: 8upx;

    .bindWx_31 {
      white-space: normal;
      width: 41upx;
      height: 37upx;
      padding: 0upx;
      margin-top: 28upx;
      margin-left: 25upx;
      float: left;
      text-align: left;
      border-radius: 0upx;
      font-size: 49upx;
      line-height: 50upx;
    }

    .Mobile {
      white-space: normal;
      width: 406upx;
      height: 63upx;
      min-height: 63upx;
      padding: 0upx;
      margin-top: 16upx;
      margin-left: 15upx;
      float: left;
      text-align: left;
      border-radius: 0upx;
      font-size: 27upx;
      line-height: 63upx;
    }
  }

  .bindWx_9 {
    white-space: normal;
    width: 660upx;
    height: 98upx;
    padding: 0upx;
    margin-top: 19upx;
    background-color: #ffffff;
    text-align: left;
    border-color: #006241;
    border-width: 1upx;
    border-style: solid;
    border-radius: 50upx;
    font-size: 8upx;

    .bindWx_34 {
      white-space: normal;
      width: 45upx;
      height: 44upx;
      padding: 0upx;
      margin-top: 28upx;
      margin-left: 27upx;
      float: left;
      text-align: left;
      border-radius: 0upx;
      font-size: 47upx;
      line-height: 49upx;
    }

    .CheckCode {
      white-space: normal;
      width: 306upx;
      height: 60upx;
      min-height: 63upx;
      padding: 0upx;
      margin-top: 20upx;
      margin-left: 9upx;
      float: left;
      text-align: left;
      border-radius: 0upx;
      font-size: 27upx;
      line-height: 60upx;
    }

    .BtSendSMS {
      white-space: normal;
      width: 165upx;
      height: 84upx;
      padding: 0upx;
      margin-top: 6upx;
      margin-left: 4upx;
      float: left;
      background-color: #0990d1;
      text-align: center;
      justify-content: center;
      border-radius: 50upx;
      cursor: pointer;
      color: #ffffff;
      font-size: 27upx;
      line-height: 84upx;
    }
  }

  .bindWx_10 {
    white-space: normal;
    width: 371upx;
    height: 29upx;
    padding: 0upx;
    clear: both;
    margin-top: 42upx;
    color: #9D9D9D;
    //margin-left: 189upx;
    //float: left;
    text-align: center;
    border-radius: 0upx;
    font-size: 24upx;
    line-height: 29upx;
  }

  .BtSubmit {
    white-space: normal;
    width: 660upx;
    margin-top: 65upx;
    background-color: #006241;
    text-align: center;
    justify-content: center;
    border-color: #006241;
    border-width: 1upx;
    border-style: solid;
    border-radius: 50upx;
    cursor: pointer;
    color: #ffffff;
    font-size: 28upx;
    line-height: 88upx;
  }
}
</style>